<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>tooltip</title>
		<script type="text/javascript" src="../../js/jquery/jquery.js">
        </script>
        <script type="text/javascript" src="../../js/jqueryui/jquery-ui.js">
        </script>
        <script type="text/javascript" src="../../js/ctp/public/ctp.core.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/public/jsextend.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/panel/ctp.ui.panel.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/button/ctp.ui.button.js">
        </script>
		<script type="text/javascript" src="../../js/ctp/tooltip/ctp.ui.tooltip.js">
        </script>
		<link href="../../css/skins/red/ctp-common.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/panel.css" rel="stylesheet" type="text/css"/>
        <link href="../../css/tooltip.css" rel="stylesheet" type="text/css"/>
		<link href="../../css/toolbar.css" rel="stylesheet" type="text/css"/>
        <script>
        	 var tooltip1;
			 var tooltip5;
			 var panel;
        	$(document).ready(
				function(){
					panel = new ctp.ui.panel({
			  	    	title: 'tooltip实例',
			  	    	collapsible: true,
			     		width: '800px',
			     		height: '450px',
			    		renderTo: 'container',
				    	html:'tooltipDiv'
			     	});
					tooltip1=new ctp.ui.tooltip({
						width : '200px',
						height : '200px',
						title : '标题',
						tip : $('<a href="http://www.icbc.com.cn">链接</a>'),
						isVisible : true,
						position:{
							x:'100px',
							y:'100px'
						},
						positionType:6,
						animate:'slideup'
				 	});
				}	
			);
			show = function(){
				var _type = $('#value').attr('value');
				tooltip1.setAnimate(_type);
			}
			dropTooltip = function(){
				tooltip1.remove();
			}
			getId = function(){
				alert (tooltip1.getId());
			}
			getVisible = function(){
				alert (tooltip1.getSettings().isVisible);
			}
			setVisible = function(_boolean){
				tooltip1.setVisible(_boolean);
			}
			getWidth = function(){
				alert (tooltip1.getSettings().width);
			}
			setWidth = function(){
				var _width = $('#value').attr('value');
				tooltip1.setWidth(_width);
			}
			getHeight = function(){
				alert (tooltip1.getSettings().height);
			}
			setHeight = function(){
				var _height = $('#value').attr('value');
				tooltip1.setHeight(_height);
			}
			getTip = function(){
				alert (tooltip1.getSettings().tip);
			}
			setTip = function(){
				var _tip = $('#value').attr('value');
				tooltip1.setTip(_tip);
			}
			getTitle = function(){
				alert (tooltip1.getSettings().title);
			}
			setContent = function(){
				var _title = $('#value').attr('value');
				tooltip1.setContent({
					title:_title,
					tip:'aaa'
				});
			}
			getAnimatebtn = function(){
				alert (tooltip1.getSettings().animate);
			}
			setAnimatebtn = function(){
				var animate = $('#value').attr('value');
				tooltip1.setAnimatebtn(animate);
			}
			run = function(){
				tooltip5 = new ctp.ui.tooltip({
					width : '200px',
					title : '你好',
					tip : '欢迎使用tooltip',
					isVisible : false,
					renderTo : 'container',
					positionType:1
				});
				tooltip5.setAnimate('slidedown');
				setTimeout(function(){
					tooltip5.setAnimate('slideup');
					setTimeout(function(){
						tooltip5.remove();
					},2000);
				},3000);
			}
		</script>
	</head>
	<body>
		<b>CTP.tooltip实例</b><hr/><br/>
		
		<div id="container">
		</div> 	
		<div id="tooltipDiv">    
			效果:<input id="input2" style="width:100px" value="slideup"></input>(fadein fadeout slidedown slideup blind bounce clip drop explode fold highlight puff pulsate scale shake slide)
			<button onclick="show();">点我</button>
			<br />
			<input id="value" />
			<button onclick="tooltip1.renderTo();">加载tooltip</button>
			<button onclick="dropTooltip();">销毁tooltip</button>
			<button onclick="getId();">获取tooltip序号</button>
			<button onclick="getVisible();">获取tooltip是否显示</button>
			<button onclick="setVisible(true);">显示tooltip</button>
			<button onclick="setVisible(false);">隐藏tooltip</button>
			<button onclick="getWidth();">获取tooltip宽度</button>
			<button onclick="setWidth();">设置tooltip宽度</button>
			<button onclick="getHeight();">获取tooltip高度</button>
			<button onclick="setHeight();">设置tooltip高度</button>
			<button onclick="getTitle();">获取tooltip标题</button>
			<button onclick="setContent();">设置tooltip内容</button>
			<button onclick="getAnimatebtn();">获取tooltip按钮动作</button>
			<button onclick="setAnimatebtn();">设置tooltip按钮动作</button>
			<br />
			<button onclick="run();" style="color:red">运行</button>
			<div id='aaa'>32r</div>
        </div>

	</body>
</html>